<template>
  <view class="my-page">
    <view class="avatar-box" v-if="token">
      <view class="top">
        <view class="avatar-box-button">
          <u-avatar
            :src="img_api + userInfo.avatar"
            size="240rpx"
            @click="toURL('/page_my/authentication/list', {}, { isAuth: true })"
          ></u-avatar>
        </view>
        <view class="right">
          <view class="collate-box" @click="scanCode">
            <image
              src="https://ltjt.sjzballsportpark.com/statics/tyc/static/icon-collate.png"
              class="icon-collate"
            ></image>
            预约核对
          </view>
        </view>
      </view>

      <view
        class="user-collate-box"
        @click="toURL('/page_my/authentication/list', {}, { isAuth: true })"
      >
        <view class="user-info-edit-box">
          <view class="user-info u-line-1"> {{ userInfo.nickName }}</view>
        </view>
        <view class="icon-edit">
          <image
            src="https://ltjt.sjzballsportpark.com/statics/tyc/static/icon-go.png"
            class="icon"
          ></image>
        </view>
      </view>
    </view>

    <view class="avatar-box" v-else @click="toLogin">
      <u-avatar
        src="https://ltjt.sjzballsportpark.com/statics/tyc/static/default-avatar.png"
        size="240rpx"
      ></u-avatar>
      <view class="user-collate-box">
        <view class="user-info">未登录</view>
      </view>
    </view>

    <view class="activity-box">
      <view class="left">
        <view
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
          "
        >
          <view
            class="title-box"
            @click="
              toURL(
                `/page_my/bookTickets/index`,
                { activeId: 0 },
                { isAuth: true }
              )
            "
          >
            <view class="title">热门活动</view>
            <image
              class="title-icon"
              src="https://ltjt.sjzballsportpark.com/statics/tyc/static/icon-my-go.png"
            ></image>
          </view>
          <view
            v-if="isShowQrcode"
            class="ticket-cancellation-box"
            @click="scanCode1"
          >
            <image
              class="ticket-cancellation-icon"
              src="https://ltjt.sjzballsportpark.com/statics/tyc/static/ticket-cancellation-icon.png"
            ></image>
            <view class="ticket-cancellation-text"> 门票核销</view>
          </view>
        </view>
        <view
          class="status-box"
          @click.stop="
            toURL(
              `/page_my/bookTickets/index`,
              { activeId: 1 },
              { isAuth: true }
            )
          "
        >
          <view class="status-item">
            <image
              class="status-icon"
              src="https://ltjt.sjzballsportpark.com/statics/tyc/static/icon-my-wait-pay.png"
            ></image>
            <view class="status-text">待付款</view>
          </view>
          <view
            class="status-item"
            @click.stop="
              toURL(
                `/page_my/bookTickets/index`,
                { activeId: 2 },
                { isAuth: true }
              )
            "
          >
            <image
              class="status-icon"
              src="https://ltjt.sjzballsportpark.com/statics/tyc/static/icon-my-payed.png"
            ></image>
            <view class="status-text"> 已付款</view>
          </view>
          <view
            class="status-item"
            @click.stop="
              toURL(
                `/page_my/bookTickets/index`,
                { activeId: 3 },
                { isAuth: true }
              )
            "
          >
            <image
              class="status-icon"
              src="https://ltjt.sjzballsportpark.com/statics/tyc/static/icon-my-hexiao.png"
            ></image>
            <view class="status-text"> 已核销</view>
          </view>
        </view>
      </view>
    </view>
    <view class="course-book">
      <view class="left">
        <view
          class="title-box"
          @click="
            toURL(`/page_my/subscribe/index`, { activeId: 0 }, { isAuth: true })
          "
        >
          <view class="title">球场预约</view>
          <image
            class="title-icon"
            src="https://ltjt.sjzballsportpark.com/statics/tyc/static/icon-go.png"
          ></image>
        </view>
        <view class="status-box">
          <view
            class="status-item"
            @click.stop="
              toURL(
                `/page_my/subscribe/index`,
                { activeId: 1 },
                { isAuth: true }
              )
            "
          >
            <image
              class="status-icon"
              src="https://ltjt.sjzballsportpark.com/statics/tyc/static/my-status1.png"
            ></image>
            <view class="status-text">待付款</view>
          </view>
          <view
            class="status-item"
            @click.stop="
              toURL(
                `/page_my/subscribe/index`,
                { activeId: 2 },
                { isAuth: true }
              )
            "
          >
            <image
              class="status-icon"
              src="https://ltjt.sjzballsportpark.com/statics/tyc/static/my-status2.png"
            ></image>
            <view class="status-text">已付款</view>
          </view>
        </view>
      </view>
      <view class="right">
        <view class="course-qrcode-box bottom" @click="showQrcode(1)">
          <image
            class="qrcode"
            src="https://ltjt.sjzballsportpark.com/statics/tyc/static/my-in-qrcode.png"
          ></image>
          <text> 进场码</text>
        </view>
        <view class="course-qrcode-box" @click="showQrcode(2)">
          <image
            class="qrcode"
            src="https://ltjt.sjzballsportpark.com/statics/tyc/static/my-appoint-qrcode.png"
          ></image>

          <text>预约码</text>
        </view>
        <view></view>
      </view>
    </view>
    <view class="order-box">
      <view class="left">
        <view
          class="title-box"
          @click="
            toURL(`/page_my/order/index`, { activeId: 0 }, { isAuth: true })
          "
        >
          <view class="title">我的订单</view>
          <image
            class="title-icon"
            src="https://ltjt.sjzballsportpark.com/statics/tyc/static/icon-go.png"
          ></image>
        </view>
        <view
          class="status-box"
          @click.stop="
            toURL(`/page_my/order/index`, { activeId: 1 }, { isAuth: true })
          "
        >
          <view class="status-item">
            <image
              class="status-icon"
              src="https://ltjt.sjzballsportpark.com/statics/tyc/static/icon-wait-pay.png"
            ></image>
            <view class="status-text">待付款</view>
          </view>
          <view
            class="status-item"
            @click.stop="
              toURL(`/page_my/order/index`, { activeId: 2 }, { isAuth: true })
            "
          >
            <image
              class="status-icon"
              src="https://ltjt.sjzballsportpark.com/statics/tyc/static/icon-due.png"
            ></image>
            <view class="status-text"> 已付款</view>
          </view>
          <view
            class="status-item"
            @click.stop="
              toURL(`/page_my/order/index`, { activeId: 3 }, { isAuth: true })
            "
          >
            <image
              class="status-icon"
              src="https://ltjt.sjzballsportpark.com/statics/tyc/static/icon-shipped.png"
            ></image>
            <view class="status-text"> 已发货</view>
          </view>
        </view>
      </view>
      <view class="right">
        <view
          class="order-address-box"
          @click="toURL('/page_my/address/index', {}, { isAuth: true })"
        >
          <image
            class="address"
            src="https://ltjt.sjzballsportpark.com/statics/tyc/static/icon-address.png"
          ></image>
          <text class="address-text"> 地址管理</text>
        </view>
      </view>
    </view>
    <overlay
      :show="showOverlay"
      @click="showOverlay = false"
      :bgColor="'rgba(255,255,255,0.9)'"
      :backdropFilter="'blur(20rpx)'"
    >
      <view class="overlay-code-box">
        <view class="qrcode-title"
          >{{ qrcodeType == 1 ? "球场门通行码" : "预约码" }}
        </view>
        <view class="qrcode-box" :class="{ order: qrcodeType == '2' }">
          <tki-qrcode
            ref="qrcode"
            cid="ticket"
            :onval="true"
            :size="400"
            :showLoading="false"
            :val="qrcodeText"
          />
        </view>
        <view class="qrcode-close-box">
          <image
            class="qrcode-close"
            src="https://ltjt.sjzballsportpark.com/statics/tyc/static/qrcode-close.png"
          ></image>
        </view>
      </view>
    </overlay>
  </view>
</template>

<script>
import overlay from "@/components/overlay/overlay";
import tkiQrcode from "tki-qrcode";
import { editAvatar } from "@/config/api.js";

const api_url = process.env.VUE_APP_BASEURL_API;
export default {
  components: { overlay, tkiQrcode },
  data() {
    return {
      showOverlay: false,
      qrcodeType: "1",
      qrcodeText: "",
    };
  },
  computed: {
    isShowQrcode() {
      if (!this.token) {
        return false;
      }
      return this.userInfo?.roles.some((item) => {
        return item.roleId == 9;
      });
    },
  },
  onShow() {},
  methods: {
    toLogin() {
      this.toURL("/pages/login/index");
    },
    onGetUserInfo(e) {
      const _this = this;
      wx.uploadFile({
        url: api_url + "/file/uploadAttaData",
        filePath: e.detail.avatarUrl,
        header: {
          Authorization: "Bearer " + this.token,
        },
        name: "file",
        success(result) {
          const data = JSON.parse(result.data);
          if (data.code == 200) {
            const url = data.data.attaPath;
            editAvatar({
              userId: _this.userInfo.userId,
              userName: _this.userInfo.userName,
              avatar: url,
            }).then((res) => {
              if (res.code == 200) {
                _this.userInfo.avatar = url;
                uni.setStorageSync("X-UserInfo", _this.userInfo);
                _this.$store.dispatch("userInfo/onInit");
              }
            });
          } else {
            uni.hideLoading();
            uni.showToast({ title: data.msg || "上传失败", icon: "none" });
          }
        },
      });
    },
    showQrcode(type) {
      if (!this.token) {
        this.toLogin();
        return;
      }
      this.qrcodeType = type;
      this.showOverlay = true;
      if (type == 2) {
        this.qrcodeText = `/page_my/subscribe/index?userId=${this.userInfo.userId}`;
      } else {
        this.qrcodeText = `${this.userInfo.userId}`;
      }
      this.$nextTick(() => {
        this.$refs.qrcode && this.$refs.qrcode._makeCode();
      });
    },
    scanCode() {
      uni.scanCode({
        success(res) {
          uni.navigateTo({
            url: res.result,
          });
        },
        fail(err) {
          uni.showToast({
            title: err?.result,
          });
        },
      });
    },
    scanCode1() {
      uni.scanCode({
        success(res) {
          uni.navigateTo({
            url: `/page_my/check/check?id=${res.result}`,
          });
        },
        fail(err) {
          uni.showToast({
            title: err?.result,
          });
        },
      });
    },
  },
};
</script>

<style lang="scss">
.my-page {
  padding: 32rpx;

  button::after {
    border-style: none;
  }

  //如果给Button添加了type=primary属性
  button[type="primary"] {
    border-style: none;
  }

  //如果给Button添加了 plain 的属性
  button[plain] {
    border-style: none;
  }

  //如果给Button添加了 type=primary 和 plain
  button[type="primary"][plain] {
    border-style: none;
  }

  .avatar-box {
    display: flex;
    flex-direction: column;
    justify-content: center;

    .top {
      display: flex;
      align-items: self-start;
      justify-content: space-between;
    }

    .right {
      display: flex;
      align-items: center;
    }

    .edit-icon {
      flex: none;
      display: block;
      width: 40rpx;
      height: 40rpx;
      margin-right: 48rpx;
    }

    .logout-icon {
      display: block;
      width: 40rpx;
      height: 40rpx;
    }

    .avatar-box-button {
      background: transparent;
      width: 240rpx;
      margin: 0;
      padding: 0;
    }

    //width: 240rpx;
    //height: 240rpx;
    //border: 0;
    //padding: 0;
    //margin: 0;
    //background-color: transparent;
    //border-radius: 0;
    //
    //.avatar {
    //  display: block;
    //  width: 100%;
    //  height: 100%;
    //}
  }

  .user-collate-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 26rpx 0 42rpx 0;
  }

  .user-info-edit-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .user-info {
    flex: 1;
    font-size: 48rpx;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.9);
    line-height: 68rpx;
    padding-right: 20rpx;
  }

  .collate-box {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 240rpx;
    height: 80rpx;
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    opacity: 1;
    border: 1px solid rgba(0, 0, 0, 0.1);
    font-size: 28rpx;
    font-weight: 600;
    color: rgba(0,0,0,0.7);
    line-height: 40rpx;
    .icon-collate {
      display: block;
      width: 40rpx;
      height: 40rpx;
      margin-right: 20rpx;
    }
  }

  .icon-edit {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48rpx;
    height: 48rpx;

    .icon {
      display: block;
      width: 48rpx;
      height: 48rpx;
    }
  }

  .title-box {
    display: flex;
    align-items: center;
    padding: 32rpx 0 0 32rpx;

    .title {
      font-size: 32rpx;
      font-weight: 600;
      color: #3d3d3d;
      line-height: 44rpx;
      margin-right: 16rpx;
    }

    .title-icon {
      width: 32rpx;
      height: 32rpx;
      display: block;
    }
  }

  .status-box {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 48rpx;
    margin-left: 48rpx;
    margin-right: 100rpx;
  }

  .status-item {
    //margin-right: 102rpx;

    .status-icon {
      display: block;
      width: 56rpx;
      height: 56rpx;
      margin: 0 8rpx 8rpx;
    }

    .status-text {
      font-size: 24rpx;
      font-weight: 400;
      color: #3d3d3d;
      line-height: 32rpx;
    }
  }

  .activity-box {
    display: flex;
    margin-bottom: 42rpx;
    background: #ff5000;
    border-radius: 16rpx 16rpx 16rpx 16rpx;

    .title-box {
      .title {
        font-size: 32rpx;
        font-weight: 600;
        color: #ffffff;
        line-height: 44rpx;
        text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
      }
    }

    .status-text {
      font-size: 24rpx;
      font-weight: 400;
      color: #ffffff;
      line-height: 34rpx;
    }

    .left {
      flex: 1;
      //width: 550rpx;
      margin-bottom: 50rpx;
    }
    .ticket-cancellation-box {
      padding: 32rpx 32rpx 0 0 ;
      display: flex;
      align-items: center;
      .ticket-cancellation-icon {
        display: block;
        width: 40rpx;
        height: 40rpx;
        margin-right: 20rpx;
      }
      .ticket-cancellation-text {
        font-size: 28rpx;
        font-weight: 600;
        color: #FFFFFF;
        line-height: 40rpx;
      }
    }
    .right {
      margin: 8rpx;
      background: #ff724a;
      border-radius: 12rpx 12rpx 12rpx 12rpx;
    }

    .activity-address-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 112rpx;
      height: 244rpx;
      border-radius: 12rpx 12rpx 12rpx 12rpx;
    }

    .address {
      display: block;
      width: 32rpx;
      height: 32rpx;
      margin-bottom: 32rpx;
    }

    .address-text {
      font-size: 28rpx;
      padding: 0 28rpx;
      font-size: 28rpx;
      font-weight: 600;
      color: #ffffff;
      line-height: 40rpx;
    }

    .activity-name {
      font-size: 36rpx;
      font-weight: 600;
      color: #ffffff;
      line-height: 50rpx;
      text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
    }

    .active-info-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 52rpx;

      .left {
        display: flex;
        align-items: center;
      }

      .right {
        position: relative;
        display: flex;
        align-items: center;

        &:before {
          content: "";
          position: absolute;
          left: -24rpx;
          height: 24rpx;
          border-right: 2rpx solid rgba(255, 255, 255, 0.8);
        }
      }

      .active-label {
        font-size: 28rpx;
        font-weight: 400;
        color: #ffffff;
        line-height: 40rpx;
        padding-left: 24rpx;

        &.ticket {
          padding-left: 10rpx;
        }
      }

      .icon-my-ticket {
        display: block;
        width: 32rpx;
        height: 32rpx;
        margin: 4rpx 2rpx;
      }

      .icon-my-go {
        display: block;
        width: 32rpx;
        height: 32rpx;
        margin: 4rpx 2rpx;
      }

      .icon-my-card {
        display: block;
        width: 32rpx;
        height: 32rpx;
        margin: 4rpx 2rpx;
      }
    }
    .status-box{
      width: 438rpx;

    }
  }

  .course-book {
    display: flex;
    flex: 1;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    border: 1px solid rgba(0, 0, 0, 0.1);
    margin-bottom: 24rpx;

    .left {
      flex: 1;
    }

    .right {
      margin: 8rpx 8rpx 8rpx 0;
    }
  }

  .course-qrcode-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 286rpx;
    height: 120rpx;
    background: #f9f4f2;
    border-radius: 12rpx 12rpx 12rpx 12rpx;

    &.bottom {
      margin-bottom: 4rpx;
    }

    .qrcode {
      display: block;
      width: 32rpx;
      height: 32rpx;
      margin-right: 20rpx;
    }
  }

  .order-box {
    display: flex;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    border: 1px solid rgba(0, 0, 0, 0.1);

    .left {
      flex: 1;
    }

    .right {
      margin: 8rpx;
    }

    .order-address-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 112rpx;
      height: 244rpx;
      background: #f9f4f2;
      border-radius: 12rpx 12rpx 12rpx 12rpx;
    }

    .address {
      display: block;
      width: 32rpx;
      height: 32rpx;
      margin-bottom: 32rpx;
    }

    .address-text {
      font-size: 28rpx;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.7);
      line-height: 40rpx;
      padding: 0 28rpx;
    }
  }
}

.overlay-code-box {
  .qrcode-title {
    font-size: 40rpx;
    font-weight: 600;
    color: #3d3d3d;
    line-height: 56rpx;
    padding: 120rpx 0 102rpx;
    text-align: center;
  }

  .qrcode-box {
    margin: 0 auto;
    width: 480rpx;
    height: 480rpx;
    background: #ffffff;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    opacity: 1;
    border: 6rpx solid rgba(0, 0, 0, 0.9);

    &.order {
      border: 6rpx solid #ff5000;
    }

    .tki-qrcode {
      display: block;
      width: 400rpx;
      height: 400rpx;
      margin: 40rpx;
    }
  }

  .qrcode-close-box {
    width: 174rpx;
    height: 174rpx;
    margin: 160rpx auto 0;

    .qrcode-close {
      display: block;
      width: 160rpx;
      height: 160rpx;
      margin: 14rpx;
    }
  }
}
</style>
